<template>
	<view class="user-wallet">
		<view class="contain bg-white m-b-20">
			<!-- 资产总计 -->
			<view class="header">
				<view class="white m-b-20">
					<view class="xs">当前保证金(元)</view>
					<view style="font-size: 76rpx">{{wallet.user_money || '0.00'}}</view>
				</view>
				<view class="money white flex">
					<view class="item">
						<view class="xs">需充值(元)</view>
						<view style="font-size: 38rpx">{{earnestPay || '0.00'}}</view>
					</view>
					<view class="item">
						<view class="xs">可提现(元)</view>
						<view style="font-size: 38rpx">{{earnestWithdraw || '0.00'}}</view>
					</view>
					<router-link :to="{path:'/bundle/pages/user_payment/user_payment',query:{money:earnestPay}}">
						<view style="height: 58rpx;" class="flex primary bg-white br60 btn-p" size="xs">充值</view>
					</router-link>
					<router-link v-if="isEarnestWithdraw" :to="{path:'/bundle/pages/user_withdraw/user_withdraw',query:{earnestMoney:earnestWithdraw}}">
						<view style="height: 58rpx;" class="flex primary bg-white br60 btn-w" size="xs">提现</view>
					</router-link>
				</view>
			</view>


			<!-- 资金明细 -->
			<view class="nav flex">

				<!-- <router-link class="nav-item">
					<view class="flex-col col-center">
						<image class="icon" src="../../static/icon_yezz.png"></image>
						<view class="m-t-10 sm">余额转账</view>
					</view>
				</router-link> -->
				<!-- <router-link class="nav-item" to="/bundle/pages/user_bill/user_bill">
					<view class="flex-col col-center">
						<image class="icon" src="../../static/icon_zhmx.png"></image>
						<view class="m-t-10 sm">账户明细</view>
					</view>
				</router-link> -->
			<!-- 	<router-link class="nav-item">
					<view class="flex-col col-center">
						<image class="icon" src="../../static/icon_zzjl.png"></image>
						<view class="m-t-10 sm">转账记录</view>
					</view>
				</router-link> -->
				<router-link class="nav-item" to="/bundle/pages/recharge_record/recharge_record">
					<view class="flex-col col-center">
						<image class="icon" src="../../static/icon_czjl.png"></image>
						<view class="m-t-10 sm">充值记录</view>
					</view>
				</router-link>
			</view>


			<!-- 热门活动 -->
			<!-- <view class="activity">
				<view class="activity-title xl flex">
					<view class="m-r-20 bg-primary" style="width: 6rpx;height: 30rpx;"></view>
					<text>热门活动</text>
				</view>
				<block v-for="(item, index) in activityList" :key="item.title">
					<view class="activity-item flex row-between" :style="{backgroundColor: item.background}">
						<view>
							<view class="xl normal" style="font-weight: 500;">{{ item.title }}</view>
							<view class="muted sm m-t-10">{{ item.slogan }}</view>
							<router-link style="display: inline-block;" :to="item.href">
								<view :style="{backgroundColor: item.buttonColor}"
									class="br60 white join-btn flex row-center">立即参与</view>
							</router-link>
						</view>
						<image style="width:274rpx; height: 210rpx;" :src="item.image"></image>
					</view>
				</block>
			</view> -->

		</view>
	</view>
</template>

<script>
	import {
		getWallet,
		veryfiyDistribute
	} from '@/api/user';
	import {INVITE_LEVEL_ID} from '@/config/cachekey'
	import Cache from '@/utils/cache'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				vipState:1,
				wallet: {},
				earnestList:[],
				// 热门活动列表数据
				activityList: [

					{
						title: "领取优惠券",
						slogan: "每日优惠券抢不停",
						button: "立即抢购",
						buttonColor: "#FC597A",
						href: "/pages/get_coupon/get_coupon",
						image: "/bundle/static/img_activity_coupon.png",
						background: "rgba(252, 89, 122, 0.1)"
					},
					{
						title: "超值商品 限时秒杀",
						slogan: "最新商品秒杀中",
						button: "立即抢购",
						buttonColor: "#00632B",
						href: "/bundle/pages/goods_seckill/goods_seckill",
						image: "/bundle/static/img_activity_seckill.png",
						background: "rgba(236, 71, 37, 0.1)"
					}
				]
			};
		},

		onShow() {
			this.veryfiyDistributeFun();
			this.earnestList=this.$u.deepClone(this.userInfo).distribution_level_list.filter((item)=>{
				return item.id = Cache.get(INVITE_LEVEL_ID)
			})
			console.log("userInfo",this.earnestList)
		},
		computed:{
			...mapGetters(["userInfo"]),
			earnestPay(){
				if (this.wallet&&this.earnestList[0]&&this.wallet.user_money!=this.earnestList[0].earnest_money) {
					return this.earnestList[0].earnest_money-this.wallet.user_money
				} else{
					return "0.00"
				}
				
				Cache.get(INVITE_LEVEL_ID)
			},
			earnestWithdraw(){
				if (this.vipState==0) {
					return this.wallet.user_money?this.wallet.user_money:false
				} else{
					return false
				}
			},
			isEarnestWithdraw(){
				if (this.vipState==0) {
					return this.wallet.user_money?true:false
				} else{
					return false
				}
				
			}
		},
		methods: {
			...mapActions(['getUser']),
			getWalletFun() {
				getWallet().then(res => {
					if (res.code == 1) {
						this.wallet = res.data
					}
				});
			},
			veryfiyDistributeFun() {
				veryfiyDistribute().then(res => {
					if (res.code == 10001) {
						// 分销会员
						this.vipState = 2
						this.getWalletFun();
					} else  {
						// 非分销会员
						this.vipState = 0;
						this.getWalletFun();
					} 
				})
			},

		}
	};
</script>
<style lang="scss">
	.user-wallet {
		.contain {
			padding: 20rpx 30rpx 36rpx;

			.header {
				position: relative;
				background: #00632B;
				border-radius: 20rpx;
				height: 320rpx;
				padding: 50rpx 30rpx 30rpx;
				box-sizing: border-box;

				.money {
					.item {
						//flex: 1;
						width: 35%;
					}
				}

				.btn-p {
					position: absolute;
					right: 30rpx;
					top: 70rpx;
					padding: 0 51rpx;
				}
				.btn-w {
					position: absolute;
					right: 30rpx;
					bottom: 70rpx;
					padding: 0 51rpx;
				}
			}

			.nav {
				border-bottom: $-solid-border;

				.nav-item {
					width: 25%;
					padding: 40rpx 0;

					.icon {
						width: 52rpx;
						height: 52rpx;
					}
				}
			}
		}
	}

	.activity {
		padding: 40rpx 0rpx;

		.activity-title {
			font-weight: bold;
		}

		.activity-item {
			padding: 15rpx 40rpx;
			// box-shadow: 0px 0rpx 20rpx rgba(0, 0, 0, 0.16);
			margin-top: 34rpx;

			.join-btn {
				height: 52rpx;
				width: 156rpx;
				margin-top: 24rpx;
			}
		}
	}
</style>
